<template>
  <div>
    <h2>数据分析报告引擎</h2>
    <el-row :gutter="22">
      <el-col :span="12">
        <el-input v-model="content"
                  type="textarea"
                  :rows="30"
                  style="width: 100%;"/>
        <el-button type="primary" size="small" style="margin: 10px;" @click="renderContent">解析</el-button>
      </el-col>
      <el-col :span="12">
        <foo :args="'123123'"></foo>
        <div v-html="result">
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Markdown from './pluggable-markdown'
import RemoteRequestPlugin from './plugins/RemoteRequestPlugin.jsx'
import FooPlugin from './plugins/FooPlugin';
import MyTable from './components/my-table'
import Foo from './components/foo'

const options = {
  // marked配置项
}
const md = new Markdown(options)
export default {
  name: 'app-docs-page',
  components: {
    // eslint-disable-next-line
    MyTable,
    Foo
  },
  data() {
    return {
      content: '来源：https://mp.weixin.qq.com/s?__biz=MzA5ODM5MDU3MA==&mid=2650881075&idx=2&sn=0a505be6f1d43a0364cab4a31c944b7a&chksm=8b67db76bc105260fc88ac0b8410a7ab9653c5cf76da46edf7a131556728244d04b60443f066&scene=90&subscene=93&sessionid=1644380193&clicktime=1644380247&enterid=1644380247&ascene=56&devicetype=android-29&version=28001339&nettype=WIFI&abtest_cookie=AAACAA%3D%3D&lang=zh_CN&exportkey=AY7KsdqHDWoBCjYOQJApm5E%3D&pass_ticket=RJxFk2FKqpk5f2ZAI9bBOns%2BbfXX3zDebdH8pZs7loAugetA9lrisntmtSrEmFZT&wx_header=3' +
          '今天给大家分享一个数据分析中著名的现象——辛普森悖论。' +
          '辛普森悖论不光可以帮助我们z正确地理解数据，还能应用到生活、工作中。' +
          '无论是否从事数据分析，都有必要了解一下这一理论。' +
          '1. 奇怪的录取率这里用的是上海交大和同济大学2021年硕士研究生报考录取人数统计。都是来源于高校官网的真实数据。' +
          '在这两所高校的报录数据中，发现了下面非常奇怪的录取率。\r\n' +
          '表1 学校、专业与录取' +
          '\r\n\n' +
          '@http(3,table)' +
          '\r\n\n' +
          '表2 专业与录取' +
          '\r\n\n' +
          '@http(4,table)' +
          '\r\n\n' +
          '分高校来看，精神病与精神卫生学专业的录取率都比电子信息专业要高，但合计后的录取率却是相反的。' +
          '我们先来看看为什么会产生这样的现象' +
          '我们都知道，如果计算录取率的分母是相同的，那么合计前后的大小关系肯定不会发生变化。现在变了说明它们的分母不一样，分母不一样说明这两所高校在这两个专业上报考的人数分布不一样。' +
          '其实，报考人数的分布不仅不一样，而且相差很大，才会导致这一现象。以精神病与精神卫生学专业为例，上海交大报考该专业的人数占比是 41%，而同济大学报考该专业的人数占比仅 0.2%。' +
          '我们再来看看应该信哪个数据。' +
          '经过上面的解释也能看出，合计录取率是没有意义的。因为两所高校在两个专业的报告人数分布相差极大，本就不应该将二者做简单的加和统计。' +
          '上面这种数据现象就是辛普森悖论，简单来说就是在分组比较中都占优势的一方，在总评中有时反而是失势的一方' +
          '2. 直观理解我们再举一个更直观例子帮助大家深入理解辛普森悖论。' +
          '下面是两个选手，参加两种级别挑战赛的胜率统计' +
          '\r\n\r\n' +
          '表3 场次、选手与胜率' +
          '\r\n\r\n' +
          '@http(6,table)' +
          '\r\n\r\n' +
          '表4 选手与胜率' +
          '\n\r\n' +
          '@http(7,table)' +
          '\n\r\n' +
          '@http(7,chart, pie,选手,赢取率)' +
          '\n\r\n' +
          '' +
          '选手1在两种级别的挑战赛胜率都比不上选手2，但在合计胜率里却比选手2更高。' +
          '但让我们来看明显选手2更强一些。' +
          '高手挑战赛难度大，选手2打了 10% 的胜率，比选手1更强。但在计算合计胜率的时候，却无视它的难度，直接跟平手挑战赛胜场简单相加。所以，最终合计胜率上平手挑战赛胜场更多的选手1占了便宜。' +
          '如果非要看和合计数据，正确的做法应该增加高手挑战赛的权重，再相加。这样对选手2才是公平的。' +
          '这也是为什么 NBA 会分别统计二分球和三分球命中率，而不会统计整体命中率' +
          '3. 延伸到生活生活中辛普森悖论也是很常见。我们上学的时候，经常有偏科，如果某个同学在数学上的成绩非常好，甚至可以比肩数学家，但他的其他学科成绩很差，所以算总成绩排名就很靠后。' +
          '如果没有更好的选拔机制，那这个人才基本上就被埋没了。所以，类似奥赛得奖可以高考加分，也是为了增加他们在优势学科的权重，更公平的参会与竞争。' +
          '包括现在全民短视频时代，很多网红表面上学历、经历和工作经验等等加起来不如一线城市的白领。但却不能得出他们不如一线白领的结论。因为他们依靠短视频这一单一优势，收入上并不差。' +
          '学习辛普森悖论之后，再看数据就不要一股脑地将数据简单相加看表面的数字。而是该分组分组，该加权加权。' +
          '数据不说谎，前提是要被正确统计。' +
          '@foo(12)',
      result: null
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      md.registerPlugin(new RemoteRequestPlugin())
      md.registerPlugin(new FooPlugin());
      if(this.content){
        this.renderContent()
      }
    },
    renderContent() {
      md.exec(this.content)
      // 渲染结果
      this.result = md.output;
    }
  }

}
</script>
<style>
@import "./assets/style/markdown.css";
</style>